<template>
	<div>
		<el-tabs type="border-card" class="demo-tabs" v-model="activeName" @tab-click="handleClick">
			<transition name="el-fade-in-linear">
				<el-tab-pane label="样品领用" name="first">
					<ReceiptTable
						v-show="activeName==='first'" 
						ref="samRec">
					</ReceiptTable>
				</el-tab-pane>
			</transition>
			<transition name="el-fade-in-linear">
				<el-tab-pane label="样品退回" name="second">
					<ReturnTable
						:tableName="tableName" 
						v-show="activeName==='second'" 
						ref="samRet"
					>
					</ReturnTable>
				</el-tab-pane>
			</transition>
			<transition name="el-fade-in-linear">
				<el-tab-pane label="领退审核查询" name="third">
					<ReturnTable 
						:tableName="tableName"
						v-show="activeName==='third'" 
						ref="recQue"
					>
					</ReturnTable>
				</el-tab-pane>
			</transition>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import { ref,reactive, onActivated } from 'vue';
import ReceiptTable from './components/project_receipt_table.vue'
import ReturnTable from './components/project_return_table.vue'

import { ElMessage, ElMessageBox,emitChangeFn,TabsPaneContext} from 'element-plus';
import { Delete, Search,Edit, Sort, CirclePlusFilled, View } from '@element-plus/icons-vue';

/* 导航页方法 */
const activeName = ref('first')
const tableName=ref("samRet")
const samRec = ref()
const samRet = ref()
const recQue = ref()
const handleClick = (tab: TabsPaneContext, event: Event) => {
	if(tab.props.name === "first"){
		activeName.value==tab.props.name
		// tableReceipt.value.reload()
		tableName.value="samRec"
	}else if(tab.props.name === "second"){
		activeName.value==tab.props.name
		samRet.value.reload()
		tableName.value="samRet"
	}else if(tab.props.name === "third"){
		activeName.value==tab.props.name
		recQue.value.reload()
		tableName.value="recQue"
	}
}

</script>

<style scoped>
.search-box {
	margin-bottom: 20px;
	float:left
}

.mr10 {
	margin-right: 10px;
} 
.el-select {
	width: 800px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.upload-demo {
    width: 360px;
}

</style>
